<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../common/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>登录</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  <link type="text/css" rel="stylesheet" href="${ctx}/css/unified/unified_login.css">
  <link type="text/css" rel="stylesheet" href="${ctx}/css/unified/mobile-unified_admin_login.css" media="screen and (max-width: 960px)">
  <style type="text/css">
    .form{background-color:#404040;}
    .form-grp{background-color:#3a3a3a;}
    #embed-captcha{height:210px;}
    #embed-captcha .gt_holder{margin:30px 85px;}
    .float_geetest { display: inline-block;  margin-left: 40px;  margin-top: 20px;}
  </style>
</head>
<body>
<div class="page">
  <div class="left">
    <div class="left-center">
      <div class="img left_img"></div>
      <p class="left_p">智合数据，以“数据驱动企业发展”为自身使命，致力为全国大中型企业提供一站式产品解决方案。</p>
    </div>

  </div>
  <div class="right">
    <!--错误提示背景色红-->
    <c:if test="${!empty error}">
      <p class="error-msg-alt">${error}</p>
    </c:if>

    <!--主要内容-->
    <form id="login-form" action="${ctx}/login" method="post">
      <input type="hidden" name="redirectUri" value="${redirect_uri}"/>
      <div class="right-center login">
        <!--标题-->
        <p class="right-lr-title">
          <span class="line"></span>
          <%--<span class="title">运&nbsp;联&nbsp;传&nbsp;媒&nbsp;身&nbsp;份&nbsp;认&nbsp;证&nbsp;系&nbsp;统</span>--%>
          <span class="title">智&nbsp;唐&nbsp;科&nbsp;技&nbsp;身&nbsp;份&nbsp;认&nbsp;证&nbsp;系&nbsp;统</span>
          <span class="line"></span>
        </p>
        <div class="form-input-grp marginTop30">
          <div class="error-out"><div class="error-msg hide"><span>密码长度不够！</span>&nbsp;&nbsp;<div class="img error-icon"></div></div></div>
          <div class="form-lr-icon l"><div class="img icon-img human"></div></div>
          <input type="text" placeholder="手机号/邮箱" class="form-input form-input-l" id="phone-email" name="username">
        </div>
        <div class="form-input-grp">
          <div class="error-out"><div class="error-msg hide"><span>密码长度不够！</span>&nbsp;&nbsp;<div class="img error-icon"></div></div></div>
          <div class="form-lr-icon l"><div class="img icon-img clock"></div></div>
          <input type="password" placeholder="请输入密码" class="form-input form-input-l" id="pwd" name="password">
        </div>
        <%--<div class="form-input-grp">--%>
          <%--<div class="error-out"><div class="error-msg hide"><span>验证码错误</span>&nbsp;&nbsp;<div class="img error-icon"></div></div></div>--%>
          <%--<div class="form-lr-icon l"><div class="img icon-img dun"></div></div>--%>
          <%--<div class="form-lr-icon r"><span id="code" class="mycode"></span></div>--%>
          <%--<input type="text" placeholder="请输入验证码" class="form-input form-input-l verifyCode" id="inputCode">--%>
        <%--</div>--%>

        <div class="float_geetest" id="float-captcha"></div>
        <p id="wait" class="show float_geetest">正在加载验证码......</p>
        <p id="notice" class="hide">请先拖动验证码到相应位置</p>

        <div class="login-operate marginTop15">
          <div class="free-login" onclick="operate_ten(this);remember()"><span class="img icon-img"><i class="fa fa-check" ></i></span>&nbsp;&nbsp;十天内免登陆</div>
          <div class="forget-pwd"><a href="${ctx}/user/find-password">忘记密码？</a> </div>
        </div>
        <!--登录按钮-->
        <div class="form-btn form-btn-u form-btn-o" id="Login">登录&nbsp;&nbsp;<i class="fa fa-chevron-right"></i></div>
        <!--注册按钮-->
        <div class="form-btn form-btn-e form-btn-o marginTop25"><a href="${ctx}/register">30秒注册</a></div>
      </div>
    </form>

  </div>
</div>
</body>
<script type="text/javascript" src="${ctx}/js/libs/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/libs/js.KinerCode.js"></script>
<script type="text/javascript" src="${ctx}/js/common/validate.js"></script>
<script type="text/javascript" src="${ctx}/js/unified/unified_login.js"></script>
<!-- 引入封装了failback的接口--initGeetest -->
<script type="text/javascript" src="http://static.geetest.com/static/tools/gt.js"></script>
<script>
  var handlerEmbed = function (captchaObj) {

    $("#Login").click(function (e) {
      var validate = captchaObj.getValidate();
      if (!validate) {
        $("#notice")[0].className = "show";
        setTimeout(function () {
          $("#notice")[0].className = "hide";
        }, 2000);
        e.preventDefault();
      }

      console.log('login');
      var phone_email=$("#phone-email").val();
      var pwd=$("#pwd").val();
      if(!isEmpty(phone_email)){
        $("#phone-email").parent().find(".error-msg").removeClass("hide");
        $("#phone-email").addClass("error-bor");
        $("#phone-email").parent().find("span").text("手机号/邮箱不能为空");
        return false;
      }else{
        $("#phone-email").parent().find(".error-msg").addClass("hide");
        $("#phone-email").removeClass("error-bor");
        if((!isPhoneNumber(phone_email)&&!isEmail(phone_email))){
          $("#phone-email").parent().find(".error-msg").removeClass("hide");
          $("#phone-email").addClass("error-bor");
          $("#phone-email").parent().find("span").text("手机号/邮箱格式不正确");
          return false;
        }else{
          $("#phone-email").parent().find(".error-msg").addClass("hide");
          $("#phone-email").removeClass("error-bor");
          if(!isEmpty(pwd)){
            $("#pwd").parent().find(".error-msg").removeClass("hide");
            $("#pwd").addClass("error-bor");
            $("#pwd").parent().find("span").text("密码不能为空");
            return false;
          }else{
            $("#pwd").parent().find(".error-msg").addClass("hide");
            $("#pwd").removeClass("error-bor");
            if(!isLessLength(pwd)){
              $("#pwd").parent().find(".error-msg").removeClass("hide");
              $("#pwd").parent().find("span").text("请输入6-16位密码");
              return false
            }else{
              $("#pwd").parent().find(".error-msg").addClass("hide");
              $("#pwd").removeClass("error-bor");
              if(!$(".verifyCode").parent().hasClass("hide")){
                if($(".verifyCode").val()==""){
                  document.getElementById("Login").setAttribute("onclick","");
                  $(".verifyCode").parent().find(".error-msg").removeClass("hide");
                  $(".verifyCode").addClass("error-bor");
                  $(".verifyCode").parent().find(".error-msg").find("span").text("验证码不能为空");
                  return false;
                }else{
                  $(".verifyCode").parent().find(".error-msg").addClass("hide");
                  $(".verifyCode").removeClass("error-bor");
                }
              }
            }
          }

        }
      }

      $('#login-form').submit();
    });
    // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
    captchaObj.appendTo("#float-captcha");
    captchaObj.onReady(function () {
      $("#wait")[0].className = "hide";
    });
    // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
  };

  $.ajax({
    // 获取id，challenge，success（是否启用failback）
    url: "/initcaptcha?t=" + (new Date()).getTime(), // 加随机数防止缓存
    type: "get",
    dataType: "json",
    success: function (data) {
      // 使用initGeetest接口
      // 参数1：配置参数
      // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
      var dataObj=eval("("+data+")");
      initGeetest({
        gt: dataObj.gt,
        challenge: dataObj.challenge,
        product: "float", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
        offline: !dataObj.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
        // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
      }, handlerEmbed);
    }
  });

  var flag="0";
  function remember(){
    if(flag=="1"){
      flag = "0";
      document.getElementById("rememberme").value=flag;
      return;
    }
    if(flag=="0"){
      flag = "1";
      document.getElementById("rememberme").value=flag;
      return;
    }
  }
</script>
</html>

